<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
      // vue-router vuex pinia 第三方库，它们都会向Vue原型上添加一些方法
      const EventPlugin = {
        install(Vue) {
          //扩展了Vue的原型，添加了些方法
          Vue.prototype.$addEventListener = Vue.prototype.$on;
          Vue.prototype.$dispatchEvent = Vue.prototype.$emit;
          Vue.prototype.$removeEventListener = Vue.prototype.$off;
        },
      };
      Vue.use2 = function(plugin){
        plugin.install(Vue);
      }
      Vue.use2(EventPlugin);
      //我现在希望给Vue的类的原型上扩展或者说增加一个方法
      var vm = new Vue({
        el: "#app",
      });
      vm.$addEventListener("hello", () => console.log("hello"));
      vm.$dispatchEvent("hello");
      /* 
        这些方法都是定义在Vue类的原型上的
        vm.$destroy();
        vm.$set
        vm.$on   $addEventListener();
        vm.$emit
        vm.$off  $removeEventListener();
        */
    </script>
  </body>
</html>
